<template>
  <div>
    <p class="q1">新用户注册</p>
    <p class="q2">很高兴您将成为商城的会员&nbsp;(注册只需一步)</p>
    <van-form>
      <van-field
        class="inp"
        v-model="username"
        placeholder="手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
      />
             <van-field
         class="inp"
        v-model="pass"
        type="password"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <van-field
         class="inp"
        v-model="password"
        type="password"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
          <van-field
         class="inp"
        v-model="word"
        type="password"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请再次确认密码' }]"
      />
      <div style="margin: 16px">
        <van-button  block type="info" class="login"  native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
     <p class="q3 q5">已有账号？<span @click="zhu">立即登录</span></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      pass:"",
      word:""
    };
  },
  methods:{
    zhu(){
      this.$router.push({path:"/login"})
    }
  }
};
</script>
<style  scoped>
.q1 {
  font-size: 26px;
  padding-left: 30px;
}
.q2 {
  font-size: 16px;
  padding-left: 30px;
}
.inp{
  width: 260px;
border: 1px solid #F5F5F5;
background: #F5F5F5;
  margin-left: 30px;
  margin-top: 20px;
}
.login{
  width:180px;
  margin-left:50px;
  margin-top: 20px;
  outline: none;
  border:none;
  border-radius: 5px;
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
}
.q3{
  width: 200px;
  margin-left: 50px;
  text-align: center;
}
.q5{
color: #549ff9
}
</style>